/* 
  目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  步骤：
    1. 使用React.createContext() 来创建Context，使用两个组件Provider Consumer
    2. 使用Provider存入数据，通过设置value属性，存入需要的数据
    3. 使用Consumer取出数据

  扩展：
    1. value属性可以传任意值
*/
import React, { Component } from 'react';

//  1. 使用React.createContext() 来创建Context，得到两个组件Provider Consumer
const { Provider, Consumer } = React.createContext();

export default class App extends React.Component {
  render() {
    return (
      // 2. 使用Provider存入数据,
      // 注意：
      // 2.1 Provider作为父组件来使用
      // 2.2 通过value（固定属性）属性来存入数据
      <Provider value={{ msg: '我是父组件传来的msg' }}>
        <div>
          <h1>父组件</h1>
          <Son></Son>
        </div>
      </Provider>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <SonSon></SonSon>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    // 3. 使用Consumer取出数据
    // 注意：
    // 3.1. Consumer标签的内容，是一个{函数}
    // 3.2. 函数的形参，代表了Provider存入的数据
    // 3.3. 函数要有一个返回值
    return (
      <div>
        <h2> 孙子</h2>
        <Consumer>{(data) => <i>{data.msg}</i>}</Consumer>
      </div>
    );
  }
}
